const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const PROJECT = require('./config/project.config.js');

module.exports = {
    /**
   * 入口 (Entry)
   * @see https://doc.webpack-china.org/configuration/entry-context/
   */
    entry: {
        index: './src/index.tsx'
    },
    /**
    * 输出 (Output)
    * @see https://doc.webpack-china.org/configuration/output/
    */
    output: {
        // output 目录对应一个绝对路径。
        path: PROJECT.PATH_DIST,
        // 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
        filename: '[name].[hash].bundle.js',
        // 此选项会向硬盘写入一个输出文件，只在 devtool 启用了 SourceMap 选项时才使用。
        sourceMapFilename: '[name].[hash].bundle.map',
        chunkFilename: '[name].[hash].chunk.js'
    },

    /**
     * 解析 (Resolve)
    * @see https://doc.webpack-china.org/configuration/resolve/
    */
    resolve: {
        // 自动解析确定的扩展，能够使用户在引入模块时不带扩展
        extensions: [' ', '.web.js','.js',".json",'.web.jsx','.jsx','.ts','.tsx'],
        modules: [PROJECT.PATH_NODE],
        alias: {
            // Support React Native Web
            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
            'react-native': 'react-native-web','@': PROJECT.PATH_SRC//// 全局相对路径别名，处理相对路径过长和繁琐问题
        },
        plugins: [
            // Prevents users from importing files from outside of src/ (or node_modules/).
            // This often causes confusion because we only process files within src/ with babel.
            // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
            // please link the files into your node_modules/ and let module-resolution kick in.
            // Make sure your source files are compiled, as they will not be processed in any way.
            //new ModuleScopePlugin(PROJECT.PATH_SRC),
        ],
    },


    plugins: [
        /**
        * HtmlWebpackPlugin 简化了HTML文件的创建
        * https://doc.webpack-china.org/plugins/html-webpack-plugin
        * https://github.com/jantimon/html-webpack-plugin#configuration
        */
        // 用于简化 HTML 文件（index.html）的创建，提供访问 bundle 的服务。
        // new HtmlWebpackPlugin()
        new HtmlWebpackPlugin({
            inject: true,
            template: PROJECT.PATH_HTML,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            },
            chunksSortMode: 'dependency'
        }),
    ],

    /**
     * 模块 (Module)
     * @see https://webpack.js.org/configuration/module/
     */
    module: {
        strictExportPresence: true,
        // 创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用加载器(loader)，或者修改解析器(parser)。
        rules: [
            {
                enforce: 'pre',
                test: /\.ts[x]?$/,
                loader: 'awesome-typescript-loader',
                include: PROJECT.PATH_SRC
            },
            {
                enforce: 'pre',
                test: /\.js[x]?$/,
                include: PROJECT.PATH_SRC,
                loader: 'babel-loader?cacheDirectory'
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },

            {
                enforce: "pre",
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'img/[name].[hash].[ext]'
                }
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    {
                        loader: "less-loader",
                        options: {
                            paths: [PROJECT.PATH_NODE]
                        }
                    }]
            },
            {
                test: /\.css$/,
                use: ['style-loader', { loader: 'css-loader' }]
            },
        ]
    }
};